<template>
  <div>
       <div class="box">
         <img :src="url" alt=""  @click="btn">
          <p :style="{backgroundColor:colorStr}">{{ dogName }}</p>
       </div>
  </div>
</template>

<script>
export default {
  props: ["url", "dogName"],
  data() {
    return {
        colorStr:'',
        // rgb:''
    };
  },
  methods:{
    btn(){
        // this.colorstr= 'rgb(Math.floor(Math.random() * 256), Math.floor(Math.random() * 256),Math.floor(Math.random() * 256))'
        this.colorStr= `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
        this.$emit('sub', this.dogName)
    }
  }
};
</script>

<style scoped>
div {
    /* display: inline-block; */
    float: left;
  /* display: flex; */
  width: 500px;
  height: 560px;
  /* background-color: pink; */
  margin-left: 10px;
  
}

img {
  width: 100%;
  height:500px;

}
p{
   height: 50px;
    /* font-size: 20px; */
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    line-height: 50px;
}
</style>